<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			.p1::first-line{
				color: #FF0000;
				font-variant: small-caps;
			}
			.p2::first-letter{
				color: #FF0000;
				font-size: xx-large;
			}
			.p3::first-line{
				color: #0000FF;
				font-variant: small-caps;
			}
			.p3::first-letter{
				color: #FF0000;
				font-size: xx-large;
			}
			.p4::before{
				content:url("https://www.runoob.com/try/demo_source/smiley.gif");
			}
			.p5::after{
				content:url("https://www.runoob.com/try/demo_source/smiley.gif");
			}
		</style>
	</head>
	<body>
		<!--:first-line 伪元素-->
		<p class="p1">你可以使用'first-line'伪元素向文本的首行设置特殊样式。</p>
		<!--:first-letter 伪元素-->
		<p class="p2">你可以使用'first-letter'伪元素向文本首字母设置特殊样式</p>
		<!--多个伪元素-->
		<p class="p3">你可以结合使用'first-line'和'first-letter'伪元素像文本首行和首字母设置特殊样式。</p>
		<!--CSS - :before 伪元素-->
		<h1 class="p4">ssssssssssssssssssssssssssssss</h1>
		<!--CSS - :after 伪元素-->
		<h1 class="p5">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</h1>
	</body>
</html>